<template>
  <div>
    <TableSearch :countryData="landData" @searchData="serchData"></TableSearch>
    <TableSlot :title="title" :tItem="filterData">
      <template v-slot:hot="slotProps">
        {{ slotProps.item.hot?'是':'否' }}
      </template>
      <template v-slot:types="slotProps">
        {{ slotProps.item.types.join('/') }}
      </template>
      <template #action="slotProps">
        <button>修改</button>
        <button @click="onDel(slotProps.item._id)">删除</button>
      </template>
    </TableSlot>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import TableSlot from '../11-自定义组件/表格组件/TableSlot.vue';
import TableSearch from '../11-自定义组件/表格组件/TableSearch.vue';
const checked = ref({name:''})

const movieData = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "duration": "83",
        "hot": 1,
        "types": [
            "动作",
            "科幻",
            "动画"
        ],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "score": "8.9",
        "duration": "134",
        "hot": 0,
        "types": [
            "动画",
            "奇幻",
            "冒险"
        ],
        "country": "日本",
        "year": "1997",
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "score": "8.9",
        "duration": "117",
        "hot": 1,
        "types": ["爱情"],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "duration": "112",
        "hot": 1,
        "types": [
            "喜剧",
            "恐怖"
        ],
        "country": '中国台湾',
        "year": "2024",
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "score": "7.3",
        "country": '韩国',
        "duration": "116",
        "hot": 0,
        "types": [
            "剧情", "传记"
        ],
        "year": "2025",
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "score": "7.0",
        "country": '中国大陆',
        "duration": "131",
        "hot": 1,
        "types": [
            "悬疑",
            "犯罪",
            "剧情"
        ],
        "year": "2025",
    }
])

const landData = reactive(
  [
    { "_id": '', "name": '' },
    {
      "_id": "682d9655fa09000092007cb3",
      "name": "中国大陆"
    },
    {
      "_id": "682f3a9047bd398e5f05fd1d",
      "name": "中国香港"
    },
    {
      "_id": "682fdada47bd398e5f05fd1f",
      "name": "中国台湾"
    },
    {
      "_id": "68303b6647bd398e5f05fd41",
      "name": "美国"
    },
    {
      "_id": "682da00efa09000092007cb5",
      "name": "法国"
    },
    {
      "_id": "6830403b47bd398e5f05fd42",
      "name": "韩国"
    },
    {
      "_id": "682d9d6efa09000092007cb4",
      "name": "日本"
    }
  ])


const title = ref([
  { id: 1, tname: '编号', name: '_id' },
  { id: 2, tname: '电影名称', name: 'name' },
  { id: 3, tname: '电影类型', name: 'types' },
  { id: 4, tname: '制片国家', name: 'country' },
  { id: 5, tname: '制片国家', name: 'hot' },
  { id: 6, tname: '操作', name: 'action' }
])


function onDel(deleteId) {
  console.log("del");
  movieData.value = movieData.value.filter(item=>{
    return item._id!==deleteId;
  })
}

const filterData = computed(()=>{
    return movieData.value.filter(item=>checked.value.name.includes(item.name))
  })

function serchData(checked){
  return 0
}

</script>

<style lang="scss" scoped></style>